$(function () {

    echarts_2()
    echarts_3()
    echarts_4()
    echarts_5()

    function echarts_2() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart2'));
        var option = {
            grid: {
                left: '0',
                top: '0',
                right: '0',
                bottom: '0%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {} //下载工具
                }
            },
            xAxis: {
                show: false
            },
            yAxis: [{
                show: true,
                data: [],
                inverse: true,
                axisLine: {show: false},
                splitLine: {show: false},
                axisTick: {show: false},
                axisLabel: {
                    textStyle: {
                        color: '#fff'
                    },
                },

            }, {
                show: false,
                inverse: true,
                data: [],
                axisLabel: {textStyle: {color: '#fff'}},
                axisLine: {show: false},
                splitLine: {show: false},
                axisTick: {show: false},
            }],
            series: [{
                name: '条',
                type: 'bar',
                yAxisIndex: 0,
                data: [],
                barWidth: 15,
                itemStyle: {
                    normal: {
                        barBorderRadius: 50,
                        color: '#1089E7',
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        formatter: '{c}',
                        textStyle: {color: 'rgba(255,255,255,.5)'}
                    }
                },
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        function get_echarts_2() {
            $.ajax({
                async:false,
                url: "/echart2",
                success: function (data) {
                    option.yAxis[0].data = data.city
                    option.yAxis[1].data = data.confirm_add
                    option.series[0].data = data.confirm_add
                    myChart.setOption(option);
                },
                error: function (xhr, type, errorThrown) {
                }
            })
        }

        setInterval(get_echarts_2, 1000 * 10)

    }

    function echarts_3() {
        var myChart = echarts.init(document.getElementById('echart3'));
        var option = {

            // backgroundColor: '#FFF0F5',

            title: {
                text: '',
                // subtext: '模拟数据',
                // x: 'center',
                textStyle: {},
                left: 'left'
            },

            legend: {
                data: ['新增确诊', '新增疑似', '新增治愈', '新增死亡'],
                left: 'right',
                textStyle: {
                    color: 'white'
                }
            },

            //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
            grid: {
                top: 50, // 等价于 y: '16%'
                left: '4%',
                right: '6%',
                bottom: '4%',
                containLabel: true
            },

            // 提示框
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'line',
                    lineStyle: {
                        color: '#7171C6'
                    }

                }
            },

            //工具框，可以选择
            toolbox: {
                feature: {
                    saveAsImage: {} //下载工具
                }
            },

            xAxis: {

                type: 'category',
                axisLabel: {
                    textStyle: {
                        color: '#fff'
                    },
                    interval: 0
                },
                data: []
            },

            yAxis: {
                type: 'value',
                axisLine: {
                    show: true
                },
                axisLabel: {
                    show: true,
                    color: 'white',
                    fontSize: 12,
                    formatter: function (value) {
                        if (value >= 1000) {
                            value = value / 1000 + 'k';
                        }
                        return value;
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#172738',
                        width: 1,
                        type: 'solid'
                    }
                }
            },

            series: [{
                name: '新增确诊',
                data: [],
                type: 'line',
                smooth: true
            },

                {
                    name: '新增疑似',
                    data: [],
                    type: 'line',
                    // 设置折线上圆点大小
                    smooth: true
                },

                {
                    name: '新增治愈',
                    data: [],
                    type: 'line',
                    // 设置折线上圆点大小
                    smooth: true
                },

                {
                    name: '新增死亡',
                    data: [],
                    type: 'line',
                    // 设置折线上圆点大小
                    smooth: true
                }
            ],

            color: ['#00EE00', '#FF9F7F', '#FFD700', '#00BFFF']
        };

        function get_echarts_3() {
            $.ajax({
                async:false,
                url: "/echart3",
                success: function (data) {
                    option.xAxis.data = data.day
                    option.series[0].data = data.confirm
                    option.series[1].data = data.supect
                    option.series[2].data = data.heal
                    option.series[3].data = data.dead
                    myChart.setOption(option);
                },
                error: function (xhr, type, errorThrown) {
                }
            })
        }

        setInterval(get_echarts_3, 1000 * 10)
    }

    function echarts_4() {
        var myChart = echarts.init(document.getElementById('echart4'));
        var option = {
            title: {
                text: '',
                subtext: '',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                textStyle: {
                    color: 'white'
                }

            },
            tooltip: {
                trigger: 'item',
                formatter: "{b} : {c} ({d}%)"
            },
            color: ['#37a2da', '#ffdb5c', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378ea'],

            series: [
                {
                    name: '本日新增',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        {value: [], name: '本土病例'},
                        {value: [], name: '境外输入'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0,0,0,0.4)'
                        }
                    }
                }
            ]
        };

        function get_echarts_4() {
            $.ajax({
                async:false,
                url: '/echart4',
                success: function (data) {
                    option.series[0].data[0].value = data.local
                    option.series[0].data[1].value = data.foreign
                    myChart.setOption(option);
                },
                error: function (xhr, type, errorThrown) {
                }
            })
        }

        setInterval(get_echarts_4, 1000 * 10)
    }

    function echarts_5() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart5'));
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    // Use axis to trigger tooltip
                    type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                }
            },
            legend: {
                textStyle: {
                    color: 'white'
                }
            },
            grid: {
                left: '1%',
                right: '12%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: [],
                axisLabel: {
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            series: [
                {
                    name: '中风险区',
                    type: 'bar',
                    stack: 'total',
                    label: {
                          formatter: function (params) {
                        if (params.value > 0) {
                            return params.value;
                        } else {
                            return '';
                        }
                    },
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    itemStyle: {
                        normal: {
                            color: '#5470c6',
                        },
                    },
                    data: []
                },
                {
                    name: '高风险区',
                    type: 'bar',
                    stack: 'total',
                    label: {
                          formatter: function (params) {
                        if (params.value > 0) {
                            return params.value;
                        } else {
                            return '';
                        }
                    },
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    itemStyle: {
                        normal: {
                            color: '#fac858',
                        },
                    },
                    data: []
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        function get_echarts_5() {
            $.ajax({
                url: "/echart5",
                async:false,
                success: function (data) {
                    option.yAxis.data = data.city
                    option.series[0].data = data.m
                    option.series[1].data = data.h
                    myChart.setOption(option);
                },
                error: function (xhr, type, errorThrown) {
                }
            })
        }

        setInterval(get_echarts_5, 1000 * 10)

    }

})
